<!--
  功能：当前赛段组件
  描述：显示当前赛段信息和查看按钮
-->
<template>
	<view class="current-stage bg-ff border-t-f0 border-b-f0">
		<view class="current-stage-header dis-flex-hsb dis-flex-vc">
			<text class="section-title font-s16 font-wb color-33">当前赛段</text>
		</view>
		
		<view class="stage-card dis-flex-hsb dis-flex-vc bg-ff border-797979 radius-16" @click="handleViewDetail">
			<view class="stage-content dis-flex-vc">
				<text class="stage-name font-s12 color-33">{{currentStageData.stageName}}</text>
				<text class="stage-date font-s12 color-92 mar-L30">{{currentStageData.startDate}}至{{currentStageData.endDate}}</text>
			</view>
			<view class="view-button bg-00abf4 radius-60">
				<text class="view-text color-ff font-s12">查看</text>
			</view>
		</view>
	</view>
</template>

<script>
export default {
	name: 'CurrentStageSection',
	props: {
		currentStageData: {
			type: Object,
			default: () => ({
				stageName: '',
				startDate: '',
				endDate: ''
			})
		}
	},
	methods: {
		handleViewDetail() {
			this.$emit('view-detail');
		}
	}
}
</script>

<style scoped>
.current-stage {
	margin: 20rpx 0;
	padding: 20rpx;
}

.current-stage-header {
	margin-bottom: 20rpx;
}

.stage-card {
	padding: 20rpx;
}

.stage-content {
	flex: 1;
}

.stage-name {
	white-space: nowrap;
}

.stage-date {
	white-space: nowrap;
}

.view-button {
	border-radius: 30rpx;
	padding: 8rpx 30rpx;
	margin-left: 20rpx;
	text-align: center;
}
</style>